<template>
	<view class="video">
		<video id="muuVideo" 
		:src="src" 
		:poster="poster" 
		object-fit="fill" 
		direction="90" 
		show-mute-btn="true" 
		page-gesture="true" 
		@play="playStart" 
		@pause="playPause" 
		@ended="playEnded" 
		@timeupdate="playTimeCallback" 
		@error="videoErrorCallback" 
		controls
	></video>
	</view>
</template>

<script>
	import muu from '../../static/js/time.js'
	
	export default {
		name: 'VideoPlayer',
		props: {
			data: {
				type: Object,
				default: {}
			}
		},

		data() {
			return {
				height: '200px',
				src: '',
				poster: '',
				canUserMemberCard: false, //是否会员免费
				tryPlay: false, //默认禁止试看，仅系列课有效
				tryTimeEnd: false, //试看时间是否结束，仅单课有效
			}
		},
		onReady: function(res) {
			
		},
		created() {
			let _this = this
			
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('muuVideo',this)
			console.log(this.videoContext)
			// #endif
			
			this.poster = this.data.video_paster_src
			this.setSrc()
			this.canUserMemberCardFn()
			
			this.$nextTick(() => {
				_this.getVideoPlayerHeight('#muuVideo');
			})
			console.log('视频播放器')
			//console.log(this.data.video_chapter)
		},
		destroyed() {
			muu.stopTimeSend()
		},
		methods: {

			getVideoPlayerHeight(element) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(element).boundingClientRect();
				query.exec((res) => {
					//console.log(res)
					this.height = res[0][0].height + 'px';
					this.$emit("setVideoPlayerHeight",this.height);
				})
			},
			/**
			 * 设置会员免费尊享
			 */
			canUserMemberCardFn: function(){
				if(this.data.can_be_used_card && this.data.can_be_used_card['member_card_info']['discount'] == 0){
					//会员专享
					this.canUserMemberCard = true
				}
			},
			
			/**
			 * 设置默认路径
			 */
			setSrc: function(){
				
				if(this.data.play_type == 1){ //系列课
					let chapter = this.data.video_chapter[0].list[0]
					this.src = chapter.all_url
					if(chapter.try_play == 1){
						this.tryPlay = true
					}
				}else{ //单课
					this.src = this.data.video
				}
			},
			
			/**
			 * 播放系列课列表内容
			 * @param {Number} chapter_index 章节索引
			 * @param {Number} lesson_index 课程索引
			 */
			playChapterIndex: function(chapter_index,lessons_index){
				let chapter = this.data.video_chapter[chapter_index].list[lessons_index]
				//console.log(chapter)
				// 未购买
				if(this.data.purchase == 0){
					if(chapter.try_play == 1 || this.canUserMemberCard == true){
						//允许播放
						// 停止播放
						this.videoContext.stop()
						// 更换视频地址
						this.src = chapter.all_url
						// 立即播放
						this.videoContext.play()
						// 索引传给父组件
						this.$emit('returnChildData',{
							chapter_index:chapter_index,
							lessons_index:lessons_index
						})
					}else{
						// 停止播放
						this.videoContext.stop()
						this.showTryPlayModal()
					}
				}
				//已购买
				if(this.data.purchase == 1){
					this.videoContext.stop()
					// 更换视频地址
					this.src = chapter.all_url
					// 立即播放
					this.videoContext.play()
					// 索引传给父组件
					this.$emit('returnChildData',{
						chapter_index:chapter_index,
						lessons_index:lessons_index
					})
				}
			},
			
			/**
			 * 当开始、继续播放时触发
			 * @param {Object} e
			 */
			playStart(e){
				console.log('开始播放')
				if(this.data.play_type == 1 && this.tryPlay == false && this.data.purchase == 0 && this.canUserMemberCard == false){
					//系列课
					//暂停视频
					this.videoContext.pause()
					this.showTryPlayModal()
				}else{
					muu.startTimeSend('Knowledge',this.data.id)
				}
				//console.log(e)
			},
			
			/**
			 * 视频暂停时触发
			 */
			playPause(e){
				console.log('播放暂停')
				muu.stopTimeSend()
			},
			
			/**
			 * 视频播放结束时
			 */
			playEnded(e){
				console.log('播放结束')
				muu.stopTimeSend()
			},
			
			/**
			 * 播放进度变化时触发
			 * @param {Object} e
			 */
			playTimeCallback: function(e){
				//console.log(e.detail)
				//单课试看时间处理
				if(this.data.play_type == 0 && this.data.purchase == 0 && this.canUserMemberCard == false){
					if(e.detail.currentTime > this.data.try_time && this.tryTimeEnd == false){
						//暂停视频
						this.videoContext.pause()
						this.tryTimeEnd = true
						this.showTryPlayModal()
						return false
					}else{
						this.tryTimeEnd = false
					}
				}
			},
			/**
			 * 显示试看结束模态框
			 */
			showTryPlayModal: function(){
				uni.showModal({
					title: '温馨提示',
					content: '订阅后观看完整视频',
					success: function(res){
						if(res.confirm){
							console.log('确认')
						}else{
							console.log('取消')
						}
					}
				});
			},
			videoErrorCallback: function(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	.video {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 96;
		video {
			width: 100%;
			
		}
	}
</style>
